<template>
	<!--我是红包组件-->
	<div class="red-packet-box">
		<!-- start  red-->
		<div class="start-red-packet" v-if="isStart">
			<div class="start-header">
				<img :src="redInfo.icon || $store.state.SysOrgInfo.icon" />
				<p>{{redInfo.payerOrg}}</p>
			</div>
			<p class="start-title" v-if="isShowTitle">{{redInfo.title || '恭喜发财，大吉大利'}}</p>
			<p class="start-title" v-else>手慢了，红包派完了</p>
			<div v-if="isShowTitle" class="start-btn-default" :class="[startBtn]" @click="startRedPacket"></div>
			<div v-if="isResultRedMore" class="result-red-More" @click="resultRedMore">
				<p>看看大家的手气</p>
				<Iconfont iconClass="iconfont iconyoujiantou1" />
			</div>
		</div>
        <img  v-if='isStart' class="close-btn-bottom"   @click='closeComponent'  src="../../assets/images/closeCode.png"/>
		<!--外面红包列表-->
		<div class="red-list-box" v-if='isOutList'>
			<div class="header-box">
				<img :src="$store.state.SysOrgInfo.icon" />
				<p>直播间红包</p>
			</div>
			<div class="connect">
				<ul>
					<li v-for="(v,index) in list" :key="index" @click="clickRedPacket(v)">
						<p class="time">{{v.crtTime}}</p>
						<div class="red-packet">
							<p class="red-up-tip">{{v.title}}</p>
							<p class="red-up-live">直播间红包</p>
						</div>
					</li>
				</ul>
			</div>
			<p class="tip-text">红包兑换进度也可进入“直播间首页-我的-我的红包”查看。</p>
		</div>
         <img  v-if='isOutList' class="close-btn-bottom"   @click='closeComponent'  src="../../assets/images/closeCode.png"/>


		<!--抢红包  list-->
		<div class="red-packet-list" v-show="isList">
			<div class="list-header">
				<img :src="redInfo.icon || $store.state.SysOrgInfo.icon" />
				<p class="list-title">{{listTitle}}</p>
				<p class="pin">拼</p>
			</div>
			<div class="red-money-box">
				<p class="num" v-if="isNumBox">{{redNum}}</p>
				<div :class="[exchangeBtn]" v-if="isNumBox" @click="exchangeRedBtn">{{exchangeBtnText}}</div>
			</div>
			<div class="red-num-tip">本轮红包共有{{hongbaoTotalNum}}个，已抢{{hongbaoCurNum}}/{{hongbaoTotalNum}}个红包</div>
			<hr class="line" />
			<div class="red-list-connect-box" ref='redList'>
				<ul>
					<li v-for="(v,index) in redListArray" :key='index'>
						<div class="li-left">
							<template v-if="v.payeeIcon">
								<img v-if="channel==gdkj" :src="v.payeeIcon">
								<img v-else :src="v.payeeIcon.replace('http://','//')">
							</template>
							<template v-else><img :src="mrTx"></template>
						</div>
						<div class="li-right">
							<div class="right-top">
								<p class="nick-name">{{v.payeeNick}}</p>
								<p class="list-number">{{v.money}}元</p>
							</div>
							<div class="right-bottom">
								<p class="red-list-time">{{v.snatchTime}}</p>
								<div class="best-luck-box" v-if="v.bestHand==1">
									<img src="../../assets/images/best-luck.svg" />
									<p>手气最佳</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
        <img  v-if='isList' class="close-btn-bottom"   @click='closeComponent'  src="../../assets/images/closeCode.png"/>
		<!--红包兑换-->
		<div class="conversion-box" v-if='isConVersion'>
			<div class="white-bg-box">
				<p class="conversion-title">{{erRedPacketTip}}</p>
				<img class="er-code-img" :src="ErCodeBase64" />
				<p class="tip-text">红包兑换进度也可进入</p>
				<p class="tip-text tip-bottom">“直播间首页 - 我的 - 我的红包”中查看。 </p>
				<div class="close-btn" @click="closeConversion">
					关闭
				</div>
			</div>
		</div>
	</div>
</template>
<script>
  import config from "../../config"
	require("jr-qrcode");
	export default {
		props: {
			redPacketData: Object, //单个红包信息
			sid: String, //场次id
			list: Object, //红包列表
			redEnterType: String, //红包入口
		},
		data() {
			return {
				startBtn: '',
				isStart: false, //开始抢红包
				isList: false, //抢红包列表
				isOutList: false, //外面的红包列表
				isConVersion: false, //红包兑换
				isShowTitle: true,
				redNum: '', //红包金额
				redListArray: [], //红包列表
				hongbaoTotalNum: '', //红包总个数
				hongbaoCurNum: '', //当前红包个数
				isNumBox: '', //红包数字box
				mrTx: require("../../assets/images/gd_mr.png"),
				exchangeBtn: '', //兑换按钮class
				exchangeBtnText: '', //兑换按钮text
				HBJMstr: '', //红包加密串
				ErCodeBase64: '', //兑换红包二维码base64
				erRedPacketTip: '', //兑换二维码提示文字
				listTitle: '', //抢红包最上面直播间名字
				redInfo: '', //红包信息
				scrollSwitch: true, //滚动开关
				page: 1,
			}
		},
		components: {},
		created: function() {
			//console.log(this.redPacketData)
			if(this.redEnterType == 'redPopup') { //红包弹出
				this.isStart = true;
				this.redInfo = this.redPacketData
				this.listTitle = this.redInfo.payerOrg;
			} else if(this.redEnterType == 'redBtn') { //红包历史按钮
				this.isOutList = true
			}else if(this.redEnterType == 'messageRedPacket'){//历史留言区域红包
				this.clickRedPacket(this.redPacketData)
			}
		},
		mounted() {
			document.body.style.overflow = 'hidden';
			let _this = this;
			_this.$refs.redList.onscroll = function() {
				let scrollTop = _this.$refs.redList.scrollTop;
				let windowHeight = _this.$refs.redList.clientHeight;
				let scrollHeight = _this.$refs.redList.scrollHeight;
				//console.log('scrollTop' + scrollTop + 'windowHeight' + windowHeight + 'scrollHeight' + scrollHeight)
				if(scrollTop + windowHeight + 1 >= scrollHeight && _this.scrollSwitch) {
					_this.page++;
					_this.scrollSwitch = false
					_this.redList()
				}
			}
		},
		destroyed() {
			document.body.style.overflow = '';
		},
		methods: {
			startRedPacket() { //start  redpacket 抢红包
				this.startBtn = 'startRedPacketAnimateStart' //动画
				//加密串
				let JMstr = {
					payee_act: this.$store.state.userInfo.un, //抢红包账号
					packet_no: this.redInfo.orderNo,
					room_id: this.$route.params.roomid
				}
				let encryptor = new JSEncrypt(); // 新建JSEncrypt对象
				encryptor.setPublicKey(config.publicKey); // 设置公钥
				let jsonStr = JSON.stringify(JMstr);
				let rsaStartHB = encryptor.encrypt(jsonStr); // 对需要加密的数据进行加密
				let startHongBao = {
					qid: new Date().getTime(),
					payee_nick: this.$store.state.userInfo.nickname,
					cipher_text: rsaStartHB,
					sid: this.sid
				};
				this.$http.post("/packet/snatch_packet", JSON.stringify(startHongBao), {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							if(res.data.code == "000000") {
								if(res.data.data.money) { //抢到了
									this.isStart = false;
									this.isList = true;
									this.isNumBox = true;
									this.redNum = res.data.data.money;
									this.redList();
									this.getRedPacketJM();
								}
							} else { //没有抢到或者已经抢完
								this.isShowTitle = false;
								this.isResultRedMore = true;
							}
						},
						err => {
							console.log(err);
						}
					);
			},
			//红包列表
			redList() {
				var startHongBao = {
					qid: new Date().getTime(),
					curr_page: this.page,
					page_size: "10",
					packet_no: this.redInfo.orderNo,
					payee_act: this.$store.state.userInfo.un
				};
				this.$http.post("/packet/q_single_packet", startHongBao, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							if(res.data.code == "000000") {
								this.redListArray = [...this.redListArray, ...res.data.data.packetList];
								this.hongbaoTotalNum = res.data.data.packetNum; //红包总个数
								this.hongbaoCurNum = res.data.data.grabbedNum; //红包当前个数
								this.scrollSwitch = true;
								if(res.data.data.packetList.length < 10) {
									this.scrollSwitch = false;
								}
								//if(res.data.data.packetNum == res.data.data.grabbedNum) { //红包已经被抢完
								//	this.hongbaoTipNum = false
								//} else {
								//	this.hongbaoTipNum = true
								//}
							}
						},
						err => {
							console.log(err);
						}
					);
			},
			getRedPacketJM() {
				var postData = {
					payee_act: this.$store.state.userInfo.un, //账号
					packet_no: this.redInfo.orderNo //红包单号
				};
				this.$http.post("/packet/q_packet_sub_encrypt", postData, { //查询红包状态
					headers: {
						"Content-Type": "application/json"
					}
				}).then(
					res => {
						if(res.data.code == '000000') {
							if(res.data.data.exchange == '1') { //exchange:1 已抢未兑换  2 已抢已兑换
								this.exchangeBtn = 'exchangeBtn';
								this.exchangeBtnText = '立即兑换';
								this.HBJMstr = res.data.data.redPacketInfo;
							} else {
								this.exchangeBtn = 'exchangeBtn-gray';
								this.exchangeBtnText = '已兑换';
							}
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			exchangeRedBtn() { //红包兑换
				// 逻辑  app截图兑换   微信中行机构号 二维码  其他机构直接兑换
				//exchange:1 已抢未兑换  2 已抢已兑换
				if(this.exchangeBtn == "exchangeBtn-gray") {
					return
				}
				var ua = navigator.userAgent.toLowerCase();
				if(/MicroMessenger/i.test(ua)) { //微信
					if(this.$channel == config.ZGYH || this.$channel == config.ZGYH_PX) { //微信 中行
						this.isStart = false;
						this.isList = false;
						this.isConVersion = true;
						this.erRedPacketTip = '微信识别二维码兑换红包';
						let buildUrl = config.API_HOST + 'auth/redpacketsync?redPacketInfo=' + this.HBJMstr + '&payee_act=' + this.$store.state.userInfo.un;
						let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3f8ffdf8f070dbf6&redirect_uri=${encodeURIComponent(buildUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
						let imgBase64 = jrQrcode.getQrBase64(url);
						this.ErCodeBase64 = imgBase64;

					} else { //微信 不是中行 直接兑换
						var dhSendData = {
							qid: new Date().getTime(),
							sub_packet_info: this.HBJMstr
						};
						this.$http.post("/packet/exchange_packet", dhSendData, {
							headers: {
								"Content-Type": "application/json"
							}
						}).then(res => {
								if(res.data.code == "000000") {
									// "兑换成功，请至微信钱包查看";
									this.exchangeBtn = 'exchangeBtn-gray'
								} else if(res.data.code == "100030") {
									//弹出错误信息
									fun.toastMessage(res.data.msg, 3000)
								} else {
									//"未知错误";
									fun.toastMessage("未知错误", 3000)
								}
							},
							err => {
								console.log(err);
							}
						);
					}
				} else { //app截图
					this.isStart = false;
					this.isList = false;
					this.isConVersion = true;
					this.erRedPacketTip = '截图保存二维码，微信扫码兑换红包'
					let buildUrl = config.API_HOST + 'auth/redpacketsync?redPacketInfo=' + this.HBJMstr + '&payee_act=' + this.$store.state.userInfo.un
					let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3f8ffdf8f070dbf6&redirect_uri=${encodeURIComponent(buildUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
					let imgBase64 = jrQrcode.getQrBase64(url);
					this.ErCodeBase64 = imgBase64;
				}

			},
			clickRedPacket(v) { //历史红包单个
				//console.log(v)
				this.redInfo = v;
				this.listTitle = v.payerOrg;
				let redInfo = {
					qid: new Date().getTime(), //时间戳
					payee_act: this.$store.state.userInfo.un, //账号
					packet_no: v.orderNo //红包id
				};
				this.$http.post("/packet/q_packet_status", redInfo, { //查询红包状态
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							if(res.data.code == "000000") {
								// "packetStatus": 0 已抢完 1 未抢完
								//  "grabbedMoney":payeeAct抢的金额
								if(res.data.data.grabbedMoney) { //抢过了
									this.redNum = res.data.data.grabbedMoney;
									this.isNumBox = true;
									this.redList();
									this.getRedPacketJM()
									this.isOutList = false;
									this.isList = true;
								} else {
									//没有抢过      1:没有红包了  2：还有红包     packetStatus  1未抢完 0 抢完
									if(res.data.data.packetStatus == "0") { //抢完
										this.isShowTitle = false;
										this.isResultRedMore = true;
										this.isStart = true;
										this.isOutList = false;
									} else { //1未抢完
										this.isStart = true;
										this.isOutList = false;
									}
								}
							}
						},
						err => {
							console.log(err);
						}
					);
			},
			closeConversion() { //兑换红包关闭
				this.isConVersion = false;
				this.isList = true;
			},
			resultRedMore() { //红包列表
				this.isStart = false;
				this.isList = true;
				this.isNumBox = false;
				this.redList();
			},
			closeComponent() { //关闭组件
				this.$emit('sendParentCloseFromRedPacket', {
					type: 'colse'
				})
			}
		},
		watch: {

		}
	}
</script>

<style scoped="scoped">
	.close-btn {
		width: 275px;
		height: 60px;
		background: linear-gradient(90deg, #FFB98A, #FFA35F);
		box-shadow: 7px 8px 18px 0px rgba(252, 103, 148, 0.35);
		border-radius: 25px;
		color: white;
		line-height: 60px;
		text-align: center;
		font-size: 32px;
	}

	.tip-bottom {
		margin: 15px 0 45px 0;
	}

	.tip-text {
		font-size: 20px;
		font-weight: 400;
		color: #999999;
	}

	.er-code-img {
		width: 314px;
		height: 314px;
		margin: 50px 0 30px 0;
	}

	.conversion-title {
		font-size: 30px;
		font-weight: 400;
		color: #333333;
	}

	.conversion-box {
		width: 615px;
		height: 792px;
		background: url(../../assets/images/redPacket/conversion-bg.png)no-repeat;
		background-size: 615px 792px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 150px;
	}

	.white-bg-box {
		width: 536px;
		height: 693px;
		background: #FFFFFF;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.best-luck-box {
		display: flex;
		align-items: center;
		font-size: 20px;
		font-weight: 500;
		color: #FEA830;
		justify-content: flex-end;
		flex: 4;
		margin-right: 23px;
	}

	.best-luck-box p {
		font-size: 20px;
		font-weight: 500;
		color: #FEA830;
		/*		transform: scale(0.5);*/
	}

	.nick-name {
		font-size: 28px;
		font-weight: 400;
		color: #181818;
		justify-content: flex-start;
		flex: 7;
		 overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
		/*background: saddlebrown;*/
	}

	.list-number {
		justify-content: flex-end;
		font-size: 28px;
		font-weight: bold;
		color: #2B2B2B;
		flex: 3;
		display: flex;
		/* background: darkviolet;*/
		margin-right: 23px;
	}

	.red-list-time {
		font-size: 18px;
		font-weight: 400;
		color: #B4B4B4;
		flex: 7;
	}

	.right-bottom img {
		width: 22px;
		height: 18px;
		margin-right: 9px;
	}

	.red-packet-box {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1110;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.start-red-packet {
		width: 530px;
		height: 880px;
		background: pink;
		background: url(../../assets/images/redPacket/red-packet-bg.png)no-repeat;
		background-size: 530px 880px;
		position: relative;
		margin-top: 180px;
		/*display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;*/
	}

	.start-header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 210px auto 0;
	}

	.start-header img {
		width: 50px;
		height: 50px;
		background: #FFFFFF;
		border-radius: 8px;
	}

	.start-header p {
		font-size: 32px;
		font-weight: 500;
		color: #FEE4B4;
		margin-left: 12px;
	}

	.start-title {
		font-size: 42px;
		font-weight: bold;
		color: #FEE4B4;
		margin: 30px auto 0;
		text-align: center;
	}

	.start-btn-default {
		width: 161px;
		height: 153px;
		background: url(../../assets/images/kai.png) no-repeat;
		background-size: 161px 153px;
		border-radius: 50%;
		margin: 300px auto 0;
	}

	.startRedPacketAnimateStart {
		animation: redPacketAnimate 1.5s linear infinite;
	}

	@keyframes redPacketAnimate {
		0% {
			transform: rotateY(0deg);
		}
		50% {
			transform: rotateY(180deg);
		}
		100% {
			transform: rotateY(360deg);
		}
	}

	.result-red-More {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26px;
		font-weight: 400;
		color: #ECCC99;
		position: absolute;
		bottom: 32px;
		left: 50%;
		margin-left: -103px;
	}

	.iconyoujiantou1 {
		margin-left: 6px;
	}

	.icon-close1 {
		font-size: 30px;
		color: white;
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.icon-close2 {
		color: white;
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.red-packet-list {
		width: 530px;
		height: 880px;
		background: pink;
		background: url(../../assets/images/redPacket/red-list.png)no-repeat;
		background-size: 530px 880px;
		position: relative;
		display: flex;
		flex-direction: column;
		margin-top: 180px;
		/*display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;*/
	}

	.list-header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 199px;
	}

	.list-header img {
		width: 50px;
		height: 50px;
		background: #FFFFFF;
		border-radius: 8px;
	}

	.list-title {
		font-size: 28px;
		font-weight: bold;
		color: #060606;
		margin: 0 22px 0 7px;
	}

	.pin {
		width: 50px;
		height: 50px;
		background: #CFAC72;
		border-radius: 8px;
		font-size: 32px;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: scale(0.5);
	}

	.red-money-box {
		width: 100%;
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.num {
		font-size: 48px;
		font-weight: bold;
		color: #CDAC76;
		line-height: 90px;
	}

	.exchangeBtn {
		width: 131px;
		height: 39px;
		background: #ECCC99;
		border-radius: 12px;
		line-height: 39px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		color: #FFFFFF;
		margin-left: 27px;
	}

	.exchangeBtn-gray {
		width: 131px;
		height: 39px;
		background: #eaeaea;
		border-radius: 12px;
		line-height: 39px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		color: #FFFFFF;
		margin-left: 27px;
	}

	.red-num-tip {
		font-size: 22px;
		font-weight: 400;
		color: #B6B6B6;
		text-align: left;
		/* transform: scale(0.5);*/
		margin-left: 22px;
	}

	.line {
		width: 100%;
		height: 1px;
		background: #F9F9F9;
		border: 0;
		margin-top: 23px;
	}

	.red-list-connect-box {
		width: 100%;
		flex: 1;
		/*background: pink;*/
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.red-list-connect-box ul {
		width: 100%;
		height: 100%;
		padding: 0 0 0 10px;
	}

	.red-list-connect-box ul li {
		width: 100%;
		height: 94px;
		display: flex;
		/*border-bottom: 2px solid #F5F5F5;*/
	}

	.li-left {
		width: 94px;
		height: 94px;
		/*background: saddlebrown;*/
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.li-left img {
		width: 65px;
		height: 65px;
		border-radius: 8px;
	}

	.li-right {
		flex: 1;
		/*background: salmon;*/
		display: flex;
		flex-direction: column;
		border-bottom: 2px solid #F5F5F5;
	}

	.right-top {
		/*background: seagreen;*/
		flex: 1;
		display: flex;
		align-items: flex-end;
	}

	.right-bottom {
		/*background: azure;*/
		flex: 1;
		display: flex;
		align-items: center;
	}

	.red-up-live {
		width: 300px;
		font-size: 14px;
		font-weight: 500;
		color: #FDD18F;
		margin: 38px 0 0 20px;
		text-align: left;
		/*        background: seagreen;*/
	}

	.red-up-tip {
		font-size: 20px;
		font-weight: 500;
		color: #FFFFFF;
		margin: 29px 0 0 84px;
	}

	.connect ul li {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.connect ul li:last-child {
		padding-bottom: 20px;
	}

	.connect ul {
		width: 100%;
		height: 100%;
	}

	.time {
		font-size: 22px;
		font-weight: bold;
		color: #878787;
		margin: 35px 0 25px 0;
	}

	.red-packet {
		width: 350px;
		height: 112px;
		border-radius: 8px;
		background: url(../../assets/images/redPacket/start-red-packet.png) no-repeat;
		background-size: 350px 112px;
	}

	.tip-text {
		font-size: 20px;
		font-weight: 400;
		color: #FFDCB8;
		line-height: 30px;
		text-align: center;
		width: 400px;
		margin-top: 15px;
	}

	.connect {
		width: 480px;
		height: 542px;
		background: #F5F5F5;
		border-radius: 5px;
		overflow-y: scroll;
		/*display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;*/
	}

	.header-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 47px 0 21px 0;
		font-size: 32px;
		font-weight: bold;
		color: #FEFEFE;
	}

	.header-box img {
		width: 48px;
		height: 48px;
		margin-right: 10px;
		border-radius: 50%;
	}
	/*.red-list-box {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1101;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	*/

	.red-list-box {
		width: 531px;
		height: 766px;
		background: url(../../assets/images/redPacket/red-history-list.png) no-repeat;
		background-size: 531px 766px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 180px;
	}

	.icon-close {
		color: #FFFFFF;
		position: absolute;
		top: 60px;
		right: 20px;
		font-size: 30px;
	}
	.close-btn-bottom{
		width: 70px;
		height: 70px;
		margin-top: 25px;
	}
</style>
